<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>TSWEB</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
    #contenttabs .tabs-header,
    #contenttabs .tabs-panels {
        border: 0;
    }
    #contenttabs .tabs-wrap {
        width: 100%;
    }
</style>

<script type="text/javascript">
$(function() {
    var $contextmenu = $('#contextmenu');
    var $contenttabs =  $('#contenttabs');
    var $easyuilayout = $('.easyui-layout');
	var $navtree = $('#navtree');
    var $chgpwdwindow = $('#chgpwdwindow');
    
	var handlers = {
	    'close': function() {
	        var index = $contenttabs.tabs('getTabIndex', $contenttabs.tabs('getSelected'));
	        $contenttabs.tabs('close', index);
	    },
	    
	    'closeall': function() {
	        while ($contenttabs.tabs('exists', 0)) {
	            $contenttabs.tabs('close', 0);
	        }
	    },
	    
	    'closeleft': function() {
	        var index = $contenttabs.tabs('getTabIndex', $contenttabs.tabs('getSelected'));
            while ($contenttabs.tabs('exists', index--)) {
                $contenttabs.tabs('close', index);
            }
	    },
	    
	    'closeright': function() {
	        var index = $contenttabs.tabs('getTabIndex', $contenttabs.tabs('getSelected'));
	        while ($contenttabs.tabs('exists', index + 1)) {
                $contenttabs.tabs('close', index + 1);
            }
	    },
        
        'closeother': function() {
            handlers['closeright']();
            handlers['closeleft']();
        }
	};
	
    $contextmenu.menu({
        onClick: function(item) {
            var handler = $(item.target).data('handler');
            handlers[handler]();
        }
    }).menu('hide');
	
	$contenttabs.tabs({
	    border: false,
	    onContextMenu: function(e, title, index) {
	        e.preventDefault();
	        $contenttabs.tabs('select', index);
	        $contextmenu.menu('show', {
	            left: e.pageX - 10,
	            top: e.pageY - 10
	        });
	    } 
    });
	
	$navtree.tree({
		url: ctx + '/sys/menu/list-authorized-menus',
		queryParams: {tree: true},
		lines: true,
		formatter: function(node) {
		    return node.name
		},
		onClick: function(node) {
		    if ($navtree.tree('isLeaf', node.target)) {
                var tabId = "tab-" + node.id;
                if ($contenttabs.tabs('existsById', tabId)) {
                    $contenttabs.tabs('selectById', tabId);                        
                } else {
                    var src = ctx + node.path + "?menuId=" + node.id;
                    var height = $easyuilayout.layout('panel', 'center').panel('options').height - 36;
                    $contenttabs.tabs('add', {
                        id: tabId,
                        title: node.name,
                        content: '<iframe scrolling="auto" frameborder="0" style="width:100%; height:' + height + 'px;"/>',
                        fit: true,
                        closable: true
                    });
                    var iframe = $contenttabs.tabs('getSelected').find('iframe')[0];
                    $(iframe).attr('src', src);
                }
		    }
		}
	});

	$chgpwdwindow.dialog({
	    title: '修改密码',
	    width: 400,
	    height: 300,
	    collapsible: true,
	    closed: true,
	    cache: false,
	    modal: true,
	    href: ctx + '/sys/user/chgpwd',
	    method: 'get',
	    buttons: [{
	        text: '保存', iconCls: 'icon-save', handler: function() {
                var $form = $chgpwdwindow.find('form');
                $form.form({
                    url: $form.attr('action') || ctx + '/sys/user/chgpwd',
                    success: function(jsonResult) {
                        jsonResult = eval('(' + jsonResult + ')');
                        if (jsonResult.success) {
                            $chgpwdwindow.window('close');
                        } else {
                            alert(jsonResult.message);
                        }
                    }
                }).submit();
            }
	    }]
	});
	
});

function navtreeReload() {
    $('#navtree').tree('reload');
}

var dropdownHandlers = {
    'chgpwd': function() {
        $('#chgpwdwindow').window('open');
    },
    
    'logout': function() {
        location.href = '${ctx}/logout';
    }
};

function userDropdownMenuClick(item) {
    dropdownHandlers[item.name]();
}

</script>

</head>

<body class="easyui-layout">
    <div data-options="region:'north',border:false,split:true"
        style="overflow: hidden; height: 30px; background: url(<c:url value="/static/images/layout-browser-hd-bg.gif"/>) #7f99be repeat-x center 50%; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑, 黑体">
        <span style="padding-left: 10px; font-size: 16px;">TSWEB</span>
        <div style="float:right; padding-right:20px;">
            <a href="javascript:void(0)"
                id="user-dropdown-menu" class="easyui-menubutton"
                data-options="menu:'#user-dropdown-menuitems',iconCls:'icon-man'"
                style="color:rgb(255,255,255)">
                <shiro:principal/>
            </a>
            <div id="user-dropdown-menuitems" style="width:150px;" data-options="onClick:userDropdownMenuClick">
                <div data-options="name:'chgpwd',iconCls:'icon-edit'">修改密码</div>
                <div class="menu-sep"></div>
                <div data-options="name:'logout',iconCls:'icon-remove'">退出</div>
            </div>
            
        </div>
    </div>
    <div data-options="region:'west', title:'导航菜单', split:true, minWidth:200, tools:[{iconCls: 'icon-reload', handler: 'navtreeReload'}]"
        style="width:15%;">
        <ul id="navtree"></ul>
    </div>
    <div data-options="region:'center'">
        <div id="contenttabs"></div>
        <div id="contextmenu">
            <div data-handler="close" data-options="iconCls:'icon-remove'">关闭</div>
            <div class="menu-sep"></div>
            <div data-handler="closeall" data-options="iconCls:'icon-remove'">关闭所有</div>
            <div class="menu-sep"></div>
            <div data-handler="closeother" data-options="iconCls:'icon-remove'">关闭其他</div>
            <div class="menu-sep"></div>
            <div data-handler="closeleft" data-options="iconCls:'icon-remove'">关闭左边</div>
            <div class="menu-sep"></div>
            <div data-handler="closeright" data-options="iconCls:'icon-remove'">关闭右边</div>
        </div>
    </div>
    <div data-options="region:'south'">Techsen Company</div>
    <div id="chgpwdwindow"></div>
</body>
</html>